<template>
	<view class="content">
		<view class="search">
			<image style="width: 34rpx; height: 34rpx;" src="../../../static/home/search.png" mode=""></image>
			<input type="text" value="" placeholder="订单号/收货人姓名/收货人手机号" />
		</view>

		<view class="ordelist" v-for="(item,index) in orderlist">
			<view class="orderone">
				<view class="orderid">
					<text>订单号：{{item.orderid}}</text>
				</view>
				<view class="orderstate">
					<text v-if="item.orderstate==0">已取消</text>
					<text style="color: #409CFD;" v-if="item.orderstate==1">订单完结</text>
					<text style="color: #666666;" v-if="item.orderstate==2">已收货</text>
				</view>
			</view>

			<view class="goods">
				<view class="goodslist" v-for="goodsitem in item.ordergoodslist">
					<view class="goodslist_left">
						<image style="width: 160rpx; height: 160rpx;" :src="goodsitem.goodsimg" mode=""></image>
					</view>
					<view class="goodslist_right">
						<view class="goodslist_right_name">
							{{goodsitem.goodsname}}
						</view>
						<view class="goodslist_right_title">
							{{goodsitem.goodstitle}}
						</view>
						<view class="goodslist_right_price">
							<view class="goodslist_right_price_jia">
								<text
									style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 28rpx;color: #409CFD;">￥</text>{{goodsitem.goodsprice}}
							</view>
							<view class="goodslist_right_price_nmb">
								x{{goodsitem.goodsnumber}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="goodsprice">
				<view class="goodsnumber">
					共<text
						style="	font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 32rpx;color: #409CFD;">{{item.ordernumber}}</text>件商品
				</view>
				<view class="orderprice">
					实付款 <text
						style=" font-family:'PingFang SC-Bold';font-weight: Bold;font-size: 28rpx;color: #FF4034;">￥{{item.orderprice}}</text>
				</view>
			</view>

			<view class="currenttime">
				<text>{{item.currenttime}}</text>
				<button type="default" @click="todetails()" >查看详情</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				state: 0,
				orderlist: [{
						id: 0,
						orderid: 123213132,
						orderstate: 0,
						ordernumber: 1,
						orderprice: "320",
						currenttime: '2024-03-28 15:05:10',
						ordergoodslist: [{
								id: 0,
								goodsimg: "../../../static/my/goodsimg.png",
								goodsname: '新思维早启蒙 情境思维数学 童年教育',
								goodstitle: "描述描述",
								goodsprice: "100",
								goodsnumber: "1"
							},
							{
								id: 0,
								goodsimg: "../../../static/my/goodsimg.png",
								goodsname: '新思维早启蒙 情境思维数学 童年教育',
								goodstitle: "描述描述",
								goodsprice: "12212",
								goodsnumber: "1"
							}
						]
					},
					{
						id: 0,
						orderid: 123213132,
						orderstate: 1,
						ordernumber: 1,
						orderprice: "320",
						currenttime: '2024-03-28 15:05:10',
						ordergoodslist: [{
								id: 0,
								goodsimg: "../../../static/my/goodsimg.png",
								goodsname: '新思维早启蒙 情境思维数学 童年教育',
								goodstitle: "描述描述",
								goodsprice: "100",
								goodsnumber: "1"
							},

						]
					},
					{
						id: 0,
						orderid: 123213132,
						orderstate: 2,
						ordernumber: 1,
						orderprice: "320",
						currenttime: '2024-03-28 15:05:10',
						ordergoodslist: [{
								id: 0,
								goodsimg: "../../../static/my/goodsimg.png",
								goodsname: '新思维早启蒙 情境思维数学 童年教育',
								goodstitle: "描述描述",
								goodsprice: "100",
								goodsnumber: "1"
							},
					
						]
					},

				]
			}
		},
		onLoad() {
			this.state=this.orderlist.orderstate
			console.log(this.orderlist.orderstate)
		},
		methods: {
			todetails(){
				uni.navigateTo({
					url:'/pages/index/my/order_details'
				})
			}
		}
	}
</script>

<style>
	.content {

		height: 2160rpx;
		background: #FAFAFA;

	}

	.search {
		display: flex;
		align-items: center;
		width: 690rpx;
		height: 80rpx;
		background: #F2F2F2;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32rpx auto 32rpx;
	}

	.search image {
		margin-left: 28rpx;
		margin-right: 30rpx;
	}

	.ordelist {
		width: 690rpx;
		/* height: 638rpx; */
		background: #FFFFFF;
		box-shadow: 8rpx 12rpx 24rpx 0rpx rgba(225, 225, 225, 0.08);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 0 auto 32rpx;
	}

	.orderone {
		width: 636rpx;
		display: flex;
		margin: auto;
		padding-top: 34rpx;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #EAEAEA;
		align-items: center;

	}

	.orderid {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;

	}

	.goodslist_right {
		width: 468rpx;
		margin: 0 22rpx 0 16rpx;
	}

	.orderstate {
		margin-left: auto;
		
		
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FF634E;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;

	}

	.goods {
		border-bottom: 2rpx solid #EAEAEA;
		width: 636rpx;
		margin: auto;
	}

	.goodslist {
		width: 636rpx;
		height: 160rpx;
		margin: 6rpx auto 6rpx;
		display: flex;
		justify-content: center;

	}

	.goodslist_right_name {

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		height: 33%;
	}

	.goodslist_right_title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* margin: 16rpx 0 14rpx 0; */
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		height: 33%;
	}

	.goodslist_right_price {
		display: flex;
		align-items: center;
		height: 33%;
	}

	.goodslist_right_price_jia {
		width: 200rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #409CFD;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.goodslist_right_price_nmb {

		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.goodsprice {
		display: flex;
		justify-content: flex-end;
		width: 636rpx;
		margin-top: 16rpx;
		align-items: center;
	}

	.goodsnumber {
		width: 30%;

		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.orderprice {
		width: 30%;

		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.currenttime {
		width: 636rpx;
		display: flex;
		align-items: center;
		margin: 26rpx auto 0;
		padding-bottom: 44rpx;
	}

	.currenttime text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.currenttime button {

		margin-right: 0;
		width: 160rpx;
		height: 56rpx;
		background: #409CFD;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		display: flex;
		align-items: center;

	}
</style>